<!--
 * relative     : e:\Code\CaseManagement\case-management-web\src\components\selector\caseManagementSelector.vue
 * Author       : 郭鹏超
 * Date         : 2024-09-06 09:33
 * LastEditors  : 郭鹏超
 * LastEditTime : 2024-12-05 20:19
 * Description  : 个案下拉框
 * CodeIterationRecord: 
 -->
<template>
  <el-select class="w-150" :disabled="disabled" :clearable="clearable" v-model="caseManagementID" @change="changeValue">
    <el-option
      v-for="(individualCase, index) in newCaseManagementList"
      :key="index"
      :label="individualCase.caseManagementName"
      :value="individualCase.caseManagementID"
    ></el-option>
  </el-select>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Number
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: false
  },
  caseManagementList: {
    type: Object as () => Record<string, any>[],
    default: () => undefined
  },
  // 是否添加全部个案
  isAddCommonCase: {
    type: Boolean,
    default: false
  }
});
const { userStore } = useStore();
const newCaseManagementList = computed(() => {
  const list = caseManagementList?.length ? caseManagementList : userStore?.caseManagementList;
  if (!isAddCommonCase) {
    return list;
  }
  return [{ caseManagementID: 999999, caseManagementName: "全部个案" }, ...list];
});
const { caseManagementList, isAddCommonCase } = props;
const emits = defineEmits(["update:modelValue", "change"]);
let caseManagementID = useVModel(props, "modelValue", emits);

const changeValue = (id: number) => {
  emits("change", newCaseManagementList.value.find((item: any) => item.caseManagementID == id) ?? {});
};
watch(
  newCaseManagementList.value,
  () => {
    if ((newCaseManagementList.value?.length ?? 0) == 0) {
      caseManagementID.value = undefined;
      return;
    }
    if (!caseManagementID.value) {
      caseManagementID.value = newCaseManagementList.value[0].caseManagementID;
      changeValue(newCaseManagementList.value[0].caseManagementID);
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss"></style>
